<template>
  <div id="foo">
    <div><input type="checkbox" id="inp" :checked="allChecked" @change="changeCheckAll" /> <label for="inp">全选</label></div>
    <div>合计：<span>￥{{total_price}}</span></div>
    <div>
      <button>结算({{total_goods}})</button>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
        }
    },
    methods:{
        changeCheckAll(e){
            // console.log();
             this.$emit('allChecked',e.target.checked)
        }
    },
    computed:{
        allChecked(){
             return this.isAllChecked
        }
    },
    props:{
        isAllChecked:{
            type:Boolean,
            default:false
        },
        total_goods:{
            type:Number,
            default:0
        },
        total_price:{
            type:Number,
            default:0
        }
    }
};
</script>

<style scoped lang="less">
#foo {
  left: 0;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid gray;
  height: 40px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px) ;
  position: fixed;
  bottom: 0;
  width: 100%;
  line-height: 40px;
  div {
    button {
      margin-right: 10px;
      border: 0;
      background: rgb(21, 51, 184);
      outline: none;
      height: 30px;
      border-radius: 10px;
      width: auto;
      color: white;
      padding-left: 10px;
      padding-right: 10px;
    }
    span{
        color: red;
    }
  }
}
</style>